<script setup>
import { ref } from 'vue'
import { throttle, calculateStartPosition, calculateNewPosition } from '@/utils'

const position = ref({ x: 510, y: 30 })
const isDragging = ref(false)
const startPosition = ref({ x: 0, y: 0 })
const iframeUrl = ref(import.meta.env.VITE_IFRAME_URL)

const startDrag = (e) => {
  isDragging.value = true
  startPosition.value = calculateStartPosition(e, position.value)

  window.addEventListener('mousemove', onDrag)
  window.addEventListener('mouseup', stopDrag)
}

const updatePosition = (e) => {
  if (isDragging.value) {
    position.value = calculateNewPosition(e, startPosition.value)
  }
}

const onDrag = throttle(updatePosition, 16)

const stopDrag = () => {
  isDragging.value = false
  window.removeEventListener('mousemove', onDrag)
  window.removeEventListener('mouseup', stopDrag)
}

</script>
<template>
  <div class="set-box need-zoom" :style="{ transform: `translate(${position.x}px, ${position.y}px)` }">
    <div class="set-top" @mousedown="startDrag"></div>
    <iframe :src="iframeUrl" frameborder="0" class="iframe-container"></iframe>
    <div :class="`cover ${isDragging}`"></div>
  </div>
</template>

<style>
.set-box {
  z-index: 500;
  position: absolute;
  width: 900px;
  height: 700px;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  .set-top{
    height: 30px;
    background-color: #ddd;
    cursor: move;
  }
  .iframe-container {
    width: 100%;
    height: 100%;
    border: none;
  }
  .cover.true{
    position: absolute;
    top: 29px;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
